<template>
	<view class="technician" :class="[{'overflow':detailFlag}]">
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:false,title:'技师列表',color:'#fff'}" />
		<!-- #endif -->
		<!-- 顶部搜索 -->
		<view class="top_nav">
			<!-- <view class="left" style="color: #fff;">
				{{city}}
			</view> -->
			<view class="left" @click="checkCity">
				<!-- <picker :range="cityArr" range-key="city_name" :value="index" @change="bindPickerChange">
					<view class="uni-input">
						{{cityArr[index].name}}
						<uni-icons type="bottom" size="15" color="#fff" class="input-icon"></uni-icons>
					</view>
				</picker> -->
				<view class="uni-input" style="color: #000;font-size: 30upx;" @click="pickerShow = true">
					{{city}}
					<uni-icons style="margin-left:10upx" type="bottom" size="15" color="#000" class="input-icon"></uni-icons>
				</view>
			</view>
			<view class="main">
				<input @input="searchJs"  placeholder="请输入技师姓名" placeholder-style="font-size:25rpx;" />
			</view>
			<view class="search" >
				<uni-icons type="search" size="25" color="#000"></uni-icons>
			</view>
		</view>
		<!-- 技师列表 -->
		<view v-if="!notList" class="technician_list" >
			<view class="technician_list-item" v-for="(item,index) in technicianList" :key="index">
				<view class="left">
					<view class="images">
						<image @click="preveImage(item.cover)" :src="item.cover" mode=""></image>
						<image class="image_tag" v-if="item.tag == 1" src="/static/images/new.png" mode="widthFix"></image>
						<image class="frist" v-if="item.tag == 2" src="/static/images/first.gif" mode=""></image>
						<image class="image_tag" v-if="item.tag == 3" src="/static/images/hot.gif" mode="widthFix"></image>
					</view>
					<view class="type" v-if="item.is_busy == 0">可服务</view>
					<view class="type" style="background-color:#FF8936;" v-else-if="item.is_busy == 1">可预约</view>
					<view class="type is_busy" v-else>不可预约</view>
				</view>
				<view class="right">
					<view class="top">
						<view class="name">
							<view v-if="item.name">{{item.name}}</view>
							<text @click="preveImage(item.images)"
								style="margin-left: 7px;background: #24D576;padding: 2px 5px;border-radius: 5px;color: #fff;font-size: 20rpx;">
								更多照片
							</text>
						</view>
						<view class="work_time">
							最近可约：{{item.service_time}}
						</view>
					</view>
					<view class="main" @click="goDetail(item)">
						<view class="">
							<view class="score">
								<image src="/static/images/collect.png" mode=""></image>
								<text>{{item.score}}</text>
							</view>
							<view class="served">已服务：{{item.sales}}单</view>
						</view>
						<view class="distance">
							<image src="/static/images/address.png" mode=""></image>
							<text>{{item.distance}}</text>
						</view>
					</view>
					<view class="footer">
						<view class="comment">
							<view class="" @click="visa(item)">
								<image src="/static/images/health.png" mode=""></image>
								<text class="health" v-if="item.shop">{{item.shop.abbr}}</text>
								<text class="health" v-else>商家</text>
							</view>
							<view class="pinglun">
								<image src="/static/images/comment.png" mode="" @click="getDetail(index)"></image>
								<text>{{item.comments}}</text>
								<!-- <text  title='111111' >1111111</text> -->
							</view>
							<view class="aixin">
								<image @click="collection(item.id)"
									:src="item.is_collect == 1 ? '/static/images/collect.png' :'/static/images/collection.png'"
									mode=""></image>
								<text> {{item.collects}}</text>
							</view>
						</view>
						<view class="appointment">
							<view class="convention is_busy" v-if="item.is_busy == 2">立即预约</view>
							<view class="convention" v-else @click="subscribe(index)">立即预约</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else-if="notList && !searchFlag" class="not_service">
			<view class="image">
				<image src="/static/images/technician/not_sevice.png" mode=""></image>
			</view>
			<view class="no_title">
				当前城市正在筹备中
			</view>
			<view class="left" @click="pickerShow = true">
				<!-- <picker :range="cityArr" range-key="city_name" :value="index" @change="bindPickerChange"> -->
					<view class="uni-input">{{city}} <text class="edit">更改</text> </view>
				<!-- </picker> -->
			</view>
		</view>
		<view class="not_service" v-else>
			<view class="tips">
				查无此技师信息
			</view>
		</view>
		<!-- 技师详细信息 -->
		<view class="technician_details" v-show="detailFlag">
			<!-- 遮罩层 -->
			<view class="top_seat" @click="closeMask"></view>
			<!-- 技师信息 -->
			<view class="comment">
				<view class="js_introduce">
					<view class="js_photo">
						<image :src="technicianDetail.cover" mode=""></image>
					</view>
					<view class="js_message">
						<view class="top_msg">
							<text class="technician_name" v-if="technicianDetail.name">{{technicianDetail.name}}</text>
						</view>
						<view class="Introduction">
							{{technicianDetail.detail}}
						</view>
					</view>
				</view>
				<view class="aptitude">
					<view class="">
						<image src="/static/images/technician/security.png" mode=""></image>
						<text>实名认证</text>
					</view>
					<view class="">
						<image src="/static/images/technician/refund.png" mode=""></image>
						<text>爽约包退</text>
					</view>
					<view class="">
						<image src="/static/images/technician/certificate.png" mode=""></image>
						<text>资质证书</text>
					</view>
				</view>
				<!-- 评论列表 -->
				<scroll-view scroll-y="true" @scrolltolower="scrolltolower"  class="comment_list" :class="{'no_item':commentList.length == 0}" v-if="!subscribeFlag">
					<view class="comment_list_item" v-for="(item,index) in commentList" :key="index">
						<view class="user_detail">
							<view class="user_name">
								<text>{{item.nickname}}</text>
								<uni-rate allow-half :value="technicianDetail.score" size="14" color="#999"
									active-color="#ff6051" :readonly="true" :is-fill="false" />
							</view>
							<view class="comment_time">
								{{item.create_time.split(' ')[0]}}
							</view>
						</view>
						<view class="comment_tags">
							<view class="tags_item" v-for="(items,index) in item.tags" :key="index">
								{{items}}
							</view>
						</view>
						<view class="comment_text">{{item.comment_text}}</view>
						<view class="comment_label">

						</view>
					</view>
					<view class="no_comment" v-if="commentList.length == 0">暂无评论</view>
				</scroll-view>
				<!-- 预约项目 -->
				<view class="project_list" v-else>
					<view class="project_list_item" v-for="(item,index) in projectList" :key="index">
						<view class="image">
							<image :src="item.cover" mode=""></image>
						</view>
						<view class="project_content">
							<view class="project_detail">
								<view style="display: flex;">
									<view class="title" v-if="item.name">{{item.name}}</view>
									<view class="time">
										<view class="time_image">
											<image src="/static/images/time.png" mode=""></image>
										</view>
										<text>{{item.duration}}分钟</text>
									</view>
								</view>
								<view class="content">
									<view class="price">￥<text>{{item.price}}</text></view>
									<view class="number">
										{{item.sales}}人选择
									</view>
								</view>

							</view>
							<view class="project_num">
								<fui-icon name="minussign" color="#0DAB57" size="52" @click="changeNum(index,1)"></fui-icon>
								<!-- <uni-icons type="minus" size="30" style="color: #0DAB57;" @click="changeNum(index,1)"></uni-icons> -->
								<text style="flex: 1;text-align: center;">{{item.projecNum}}</text>
								<!-- <uni-icons type="plus-filled" size="30" style="color: #00AC50;" @click="changeNum(index,2)"></uni-icons> -->
								<fui-icon name="plussign" color="#00AC50" size="52" @click="changeNum(index,2)"></fui-icon>  
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit" v-if="subscribeFlag">
			<view class="all_price">合计：￥<text>{{allPrice.toFixed(2)}}</text></view>
			<view class="submit_button" @click="goOrderPay">提交订单</view>
		</view>
		<fui-picker :options="cityArr" :linkage="true" :show="pickerShow" @change="pickerChange" @cancel="pickerCancel"></fui-picker>
		<fui-modal :buttons="[]" width="580" :show="show">
			<div class="showModal">
				<view class="showTitle">
					下单须知
				</view>
				<view class="showContent">
					1.你悦到家服务属于舒缓保健，只提供专业、正规的推拿按摩服务，对于不正当的行为和要求，理疗师有权拒绝服务；<br />
					2.根据平台规范，理疗师服务期间禁止收取小费，如理疗师有索取小费行为，用户可联系客服投诉，我们将维护您的权益;<br />
					3.理疗师出发超过5分钟，取消订单将产生一定的费用，具体费用详见个项目详情页说明。
				</view>
				<view class="showBtn">
					<view class="" @click="show = false">
						取消
					</view>
					<view class="" @click="yuyue">
						继续下单
					</view>
				</view>
			</div>
		</fui-modal>
	</view>
</template>

<script>
	import topTitle from "@/components/topTitle.vue"
	export default {
		components: {
			topTitle 
		}, 
		data() {
			return {
				userInfo: {},
				technician: '',
				city:'',
				citys:'',
				pickerShow:false,
				cityArr: ['选择城市', '长沙市', '广州市', '深圳市', '北京市'],
				index: 0,
				searchName: '',
				technicianList: [],
				technicianDetail: {},
				detailFlag: false,
				commentList: [],
				subscribeFlag: false,
				maxHeight: '',
				projectListConstant: [],
				projectList: [],
				page: 1,
				limit: 10,
				latLon: {},
				checkCityFlag: false,
				notList: false,
				optionId: "",
				commentPage: 1,
				commentLimit: 10,
				technicianId: '',
				listPage:1,
				listLimit:10,
				searchFlag:false,
				show: false,
				infoindex:''
			};
		},
		computed: {
			allPrice() {
				var price = 0
				this.projectList.forEach((item, index) => {
					if (item.num != 0) {
						price += Number(item.projecNum) * Number(item.price)
					}
				})
				return price
			}
		},
		onLoad(option) {
			uni.showLoading({
				title:'加载中,请稍后'
			})
			this.getForce()
			// if (!uni.getStorageSync('token')) {
			// 	// uni.showToast({
			// 	// 	title: '未登录',
			// 	// 	icon: "none"
			// 	// })
			// 	// #ifdef APP-PLUS
			// 	uni.navigateTo({
			// 		url: '/pages/login/login' 
			// 	})
			// 	// #endif
			// 	// #ifdef H5
			// 	if (navigator.userAgent.toLowerCase().indexOf('micromessenger') === -1) {
			// 		setTimeout(() => {
			// 			uni.navigateTo({
			// 				url: '/pages/login/index'
			// 			})
			// 		}, 1000)
			// 	} else {
			// 		let url = ''
			// 		if(this.phone_login){
			// 			url = '/pages/login/login'
			// 		}else{
			// 			url = '/pages/login/index'
			// 		}
			// 		setTimeout(() => {
			// 			uni.navigateTo({
			// 				url:url
			// 			})
			// 		}, 1000)
			// 	}
			// 	// #endif
			// }
			if(uni.getStorageSync('userInfo'))this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			if (option.id) {
				this.optionId = option.id
			}
			uni.getSystemInfo({
				success: (res) => {
					this.maxHeight = res.windowHeight - res.windowBottom - res.windowTop
				}
			})
			this.projectListConstant = JSON.parse(JSON.stringify(this.projectList))
			// this.latLon = JSON.parse(uni.getStorageSync('latLon'))
			// uni.showLoading({
			// 	title: '获取位置中...',
			// })
			// #ifdef H5
			navigator.geolocation.getCurrentPosition((res) => {
				this.latLon = {
					"latitude": res.coords.latitude,
					"longitude": res.coords.longitude,
				}
				this.getCity()
				this.getProject()
				uni.hideLoading()
			
			}, function(error) {
				uni.showToast({
					title: '加载失败,请刷新重试',
					icon: "none"
				})
			});
			// uni.getLocation({
			// 	type: 'gcj02',
			// 	highAccuracyExpireTime: 100,
			// 	success: (res) => {
			// 		this.latLon = {
			// 			"latitude": res.latitude,
			// 			"longitude": res.longitude,
			// 		}
			// 		this.getCity()
			// 		this.getProject()
			// 		uni.hideLoading()
			// 	},
			// 	fail:(err)=>{
			// 		uni.hideLoading()
			// 		uni.showToast({
			// 			title:'加载失败,请刷新重试',
			// 			icon:"none"
			// 		})
			// 	}
			// })
			// #endif
			// #ifdef APP-PLUS
			let locationType = '';
			if (uni.getSystemInfoSync().platform =='android') { //android终端
				locationType = 'gcj02'
			} else if (uni.getSystemInfoSync().platform == "ios") { //ios终端
				locationType = 'wgs84'
			}
			uni.getLocation({
				type:locationType,
				success: (res) => {
					this.latLon = {
						"latitude": res.latitude,
						"longitude": res.longitude,
					}
					this.reverseGeocoding(res.longitude, res.latitude)
					this.getProject()
					uni.hideLoading()
				}, 
				fail:(err)=>{
					uni.hideLoading()
					uni.showToast({
						title:'加载失败,请刷新重试',
						icon:"none"
					})
				}
			})
			// #endif
		},
		onShow() {
			// this.getCity()
			// this.getProject()
		},
		onPullDownRefresh() {
			uni.showLoading({
				title:'刷新中...'
			})
			this.listPage = 1;
			this.getTechnicianList('down')
		},
		onReachBottom() {
			this.listPage++;
			uni.showLoading({
				title:'加载中...'
			})
			this.getTechnicianList()
		},
		//点击了tabbar清空首页带过来的 服务Id
		onTabItemTap() {
			this.optionId = ""
		},
		methods: {
			pickerChange(e){
				this.city = e.text 
				this.technicianList = []
				this.getTechnicianList()
				this.pickerCancel()
			},
			pickerCancel(){
				this.pickerShow = false;
			},
			//强制登录配置
			getForce(){
				this.$http({
					url:'/api/config',
					method:'get',
					success:result=>{
						this.force_login = result.data.force_login
						this.phone_login = result.data.phone_login
					}
				})
			},
			scrolltolower(e){
				uni.showLoading({
					title:'加载中...'
				})
				this.commentPage++;
				this.getComments()
			},
			//获取城市列表
			getCityList() {
				this.$http({
					url: '/api/city_list',
					method: 'get',
					success: result => {
						result.data.list.forEach((item,index)=>{
							item.text = item.name
							item.value = item.id
						})
						this.cityArr = result.data.list.filter(item => item.is_show !== 0);
						console.log(this.cityArr,'cityapp')
						this.cityArr.forEach((item,index)=>{
							if(item.name == this.citys){
								this.city = item.name
								this.getTechnicianList()
							}
						})
						uni.hideLoading()
						// this.cityArr.forEach((item, index) => {
						// 	if (item.city_name == this.city) {
						// 		this.index = index
						// 	}
						// })
					}
				})
			},
			//选择城市
			checkCity() {
				return false;
				if (this.cityArr[0].city_name == "选择城市") {
					this.cityArr.splice(0, 1)
				}
			},
			//头像图片预览
			preview(data) {
				var arr = []
				arr.push(data)
				uni.previewImage({
					urls: arr,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
						},
						fail: function(err) {
						}
					}
				});
			},
			//技师详情
			goDetail(data) {
				// this.preveImage([data.cover])
				// 进入详情
				// return false;
				//暂停进入
				uni.setStorageSync('technician_id', data.id)
				uni.navigateTo({
					url: '/pages/technician/detail/detail',
				})
				
			},
			//更多照片
			preveImage(data) {
				if(typeof data == 'string' && data){
					data = [data]
				}
				// 预览图片
				uni.previewImage({
					urls: data,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
						},
						fail: function(err) {
						}
					}
				});
			},
			//收藏技师
			collection(id) {
				let that = this;
				this.$http({
					url: `/api/technician/collect/${id}`,
					method: 'post',
					success: result => {
						if (result.code == 200) {
							this.listPage = 1;
							this.technicianList = [];
							that.getTechnicianList()
							uni.showToast({
								title: result.msg,
								icon: "none",
								duration: 1500
							})
							that.$forceUpdate()
						}
					}
				})

			},
			visa(data) {
				if(!data.shop) return false;
				uni.navigateTo({
					url: '/pages/technician/visa/visa?data=' + JSON.stringify(data)
				})
			},
			getDetail(i) {
				this.commentPage = 1;
				this.commentList = [];
				this.technicianDetail = JSON.parse(JSON.stringify(this.technicianList[i]))
				this.detailFlag = true
				this.getComments()
			},
			closeMask() {
				this.detailFlag = false
				this.subscribeFlag = false
				this.projectList = JSON.parse(JSON.stringify(this.projectListConstant))
			},
			bindPickerChange(e) {
				return false;
				this.index = e.detail.value
				this.city = this.cityArr[this.index].city_name
				uni.setStorageSync('cityIndex', this.cityArr[this.index].city_name)
				this.getTechnicianList()
			},
			//搜索技师
			searchJs(e){
				this.searchName = e.detail.value
				this.searchFlag = true;
				this.listPage = 1;
				this.technicianList = []
				this.getTechnicianList()
			},
			// 预约
			subscribe(i) {
				this.infoindex = i
				this.show = true
			},
			yuyue(){
				this.show = false
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请登录',
						icon: "none"
					})
					// return false;
				}
				if (this.userInfo.bind_phone != 1) {
					uni.showToast({
						title: '未绑定手机号',
						icon: "none"
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 1500)
					return false;
				}
				this.technician = this.technicianList[this.infoindex]
				this.technicianId = this.technicianList[this.infoindex].id
				this.technicianDetail = JSON.parse(JSON.stringify(this.technicianList[this.infoindex]))
				if (this.optionId == "") {
					this.detailFlag = true 
					this.subscribeFlag = true
					this.getProject()  
				} else {
					var arr = this.projectList.filter((el) => {
						return el.id == this.optionId
					})
					arr[0].projecNum = 1
					var products = []
					products.push({
						product_id: arr[0].id,
						num: arr[0].projecNum
					})
					let data = {
						products,
						technician_id: this.technician.id
					}
					let orderDetail = {
						data,
						technician: this.technician,
						project: arr
					}
					//订单详细信息缓存，等待支付页获取
					uni.setStorageSync('orderDetail', JSON.stringify(orderDetail))
					uni.navigateTo({
						url: `/pages/orders/orderPay/orderPay`
					})
				}
			},
			// 数量修改
			changeNum(index, i) {
				if (i == 1) { //1代表减少
					if (this.projectList[index].projecNum > 0) {
						this.projectList[index].projecNum--
					} else {
						this.projectList[index].projecNum = 0
					}
				} else {
					this.projectList[index].projecNum++
				}
			},
			//订单支付
			goOrderPay() {
				var arr = this.projectList.filter((el) => {
					return el.projecNum > 0
				})
				if (arr.length == 0) {
					uni.showToast({
						title: '请选择项目',
						icon: 'none'
					})
					return false;
				}
				let severTime = ""; //服务时间(显示)  
				let storageTime = ""; //服务时间(调接口用)
				let products = [];
				arr.forEach((item, index) => {
					products.push({
						product_id: item.id,
						num: item.projecNum
					})
				})
				let data = {
					products,
					technician_id: this.technician.id
				}
				let orderDetail = {
					data,
					technician: this.technician,
					project: arr
				}
				//订单详细信息缓存，等待支付页获取
				uni.setStorageSync('orderDetail', JSON.stringify(orderDetail))
				uni.navigateTo({
					url: `/pages/orders/orderPay/orderPay`
				})


			},
			//获取服务列表
			getProject() {
				this.$http({
					url: `/api/product/list?page=${this.page}&limit=${this.limit}&technician_id=${this.technicianId}`, 
					method: 'get',
					success: result => {
						let data = result.data.list
						data.forEach((item, index) => {
							item.projecNum = 0 //每条数据添加数量字段  sales：销量    projecNum：当前服务项目的数量
						})
						this.projectList = data
					}
				})
			},
			//获取技师列表
			getTechnicianList(type) {
				this.$http({
					url: `/api/technician/list?page=${this.listPage}&limit=${this.listLimit}&keywords=${this.searchName}&product_id=${this.optionId}&longitude=${this.latLon.longitude}&latitude=${this.latLon.latitude}&city_name=${this.city}`,
					// url:`/api/technician/list?keywords=&longitude=&latitude=&city_name=`,
					method: 'get',
					success: result => {
						let data = this.technicianList;
						if (data.length == 0) {
							this.technicianList = result.data.list
						} else {
							this.technicianList = data.concat(result.data.list)
						} 
						if(type){
							this.technicianList = result.data.list
							uni.showToast({
								title:'刷新成功'
							})
							uni.stopPullDownRefresh()
						}
						if (this.technicianList.length == 0) {
							this.notList = true
							uni.showToast({
								title: '暂无数据',
								icon: "none"
							})
						} else {
							this.notList = false
						}
						uni.hideLoading()
						this.$forceUpdate()
					}
				})
			},
			//地址逆解析显示对应城市
			getCity() {
				let that = this;
				let locationType = '';
				if (uni.getSystemInfoSync().platform =='android') { //android终端
					locationType = 'gcj02'
				} else if (uni.getSystemInfoSync().platform == "ios") { //ios终端
					locationType = 'wgs84'
				}
				// #ifdef H5
				uni.showLoading({
					title: '加载中..',
					duration: 1000
				})
				// let latLon = JSON.parse(uni.getStorageSync('latLon'))
				let latLon = this.latLon;
				let url = `https://apis.map.qq.com/ws/geocoder/v1/?location=`
				this.$jsonp(url, {
					key: 'QB3BZ-OTMRD-VTN4B-HOE6U-7IOZ6-AVFX4',
					location: `${latLon.latitude},${latLon.longitude}`,
					output: 'jsonp'
				}).then(res => {
					console.log(`${latLon.latitude},${latLon.longitude}`,res,'------------当前经纬度')
					// uni.showModal({
					// 	title:'',
					// 	content:res.result.address
					// })
					if (res.status == 0) {
						setTimeout(() => {
							uni.hideLoading({
								success: result => {
									if(res.result.address_component.city.indexOf('市')){
										that.city = res.result.address_component.city.slice(0,res.result.address_component.city.length - 1)
										if(res.result.address_component.district.indexOf('区')){
											this.citys = res.result.address_component.district.slice(0,res.result.address_component.district.length)
										}
										console.log(that.city,'1')
									}else{
										that.city = res.result.address_component.city
										console.log(that.city,'2')
									} 
									// that.city = '长沙市'
									that.getCityList()
									that.getTechnicianList()
								}
							})
						}, 1000)

					}
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.authorize({
					scope: "scope.userLocation",
					success: () => {
						uni.showLoading({
							title: '获取地理位置中', 
							duration: 1000
						})
						uni.getLocation({
							success: (result) => {
								let url = `https://apis.map.qq.com/ws/geocoder/v1/?location=`
								this.$jsonp(url, {
									key: 'QB3BZ-OTMRD-VTN4B-HOE6U-7IOZ6-AVFX4',
									location: `${result.latitude},${result.longitude}`,
									output: 'jsonp'
								}).then(res => {
									console.log(res, '-------------------------res')
									if (res.status == 0) {
										setTimeout(() => {
											uni.hideLoading({
												success: result => {
													that.city = res.result.address_component.city
													// that.city = '长沙市'
													that.getTechnicianList()
													that.getCityList()
												}
											})
										}, 1000)

									}
								})
							}
						})
					}
				})
				// #endif
			},
			reverseGeocoding(longitude, latitude) {
				uni.request({
					url: 'https://apis.map.qq.com/ws/geocoder/v1/',
					method: 'GET',
					data: {
						location: `${latitude},${longitude}`,
						key: 'QB3BZ-OTMRD-VTN4B-HOE6U-7IOZ6-AVFX4', // 替换成你申请的腾讯地图API Key
						get_poi: 1,
					},
					success: (res) => {
						// res.data 包含了逆地理编码的结果
						console.log('逆地理编码结果', res.data);
						uni.setStorageSync('address', res.data.result.address_component.city);
						this.city = res.data.result.address_component.city
						this.getCityList()
						this.getTechnicianList()
					},
					fail: (err) => {
						console.error('逆地理编码失败', err);
					},
				});
			},
			//获取评论列表
			getComments() {
				this.$http({
					url: `/api/technician/comment/list/${this.technicianDetail.id}?page=${this.commentPage}&limit=${this.commentLimit}`,
					method: 'get',
					success: result => {
						uni.hideLoading()
						let data = this.commentList
						if(this.commentList.length == 0){
							this.commentList = result.data.list
						}else{
							this.commentList = data.concat(result.data.list)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		// height: 100%;
	}
	.technician {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		// overflow-y: auto;
		.top_nav {
			width: 100%;
			height: 80upx;
			position: relative; 
			display: flex;
			justify-content: space-around;
			align-items: center;
			/* #ifdef H5 */
			background: linear-gradient(116.3deg, #35dba0, #35dba0 0, #18b567 111.69%, #18b567 0);
			/* #endif */
			/* #ifdef APP-PLUS */
			background: #3AE890;
			/* #endif */
			padding: 5px 20rpx 5px 0;
			box-sizing: border-box;
			.left {
				width: 75px;
				display: flex;
				align-items: center;
				margin: 0 22px;
				position: relative;
				>picker {
					flex: 1;
					font-size: 16px;
					font-weight: bold;
					color: #fff;
				}

				.uni-input {
					display: flex;
					align-items: center;

					.input-icon {
						margin-left: 5rpx;
					}
				}

				.down {
					width: 18px;
					height: 14px;
					position: absolute;
					right: 25px;
					margin-left: 5px;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.main {
				flex: 1;
				height: 34px;
				display: flex;
				align-items: center;
				// border: 1px solid #eee;
				// border-radius: 5px;
				background-color: #fff;
				opacity: 0.8;
				position: relative;
				border-radius: 25px;
				padding-left: 10px;

				input {
					text-indent: 10px;

				}
			}

			.search {
				// margin:0rpx 20px 0 10px;
				align-items: center;
				position: absolute;
				top: 25%;
				right: 40rpx;
				bottom: 0;
			}
		}
		.technician_list {
			flex: 1;
			// display: flex;
			// flex-direction: column; 
			// overflow-y:scroll;
			padding:0 12px;
			padding-bottom: 170upx;
			.technician_list-item {
				display: flex;
				background: #fff;
				margin-top: 20upx;
				border-radius: 8px;
				padding: 20rpx 0;
				box-sizing: border-box;
				.left {
					display: flex;
					// display: -webkit-flex;
					flex-direction: column;
					// -webkit-direction: column;
					align-items: center;
					justify-content: space-around;
					padding-left: 10upx;
					.images{
						width: 120upx;
						height: 120upx;
						position: relative;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
						.frist{
							width: 200%;
							height: 200%;
							position: absolute;
							top: -50%;
							left: -50%;
						}
						.image_tag{
							width: 40%;
							position: absolute;
							top: 0;
							left: -5%;
						}
					}

					.type {
						padding: 0 20upx;
						background: #24D576;
						border-radius: 40upx;
						color: #fff;
						z-index: 1;
						// margin-top: -20rpx;
						font-size: 25upx;
					}
					>.is_busy{
						background: #eee;
						color: #666;
					}
				}
				.right {
					flex: 1;
					// -webkit-flex:1;
					padding: 10upx 20upx;
					display: flex;
					// display: -webkit-flex;
					flex-direction: column;

					// -webkit-flex-direction: column;
					view {
						display: flex;
						// display: -webkit-flex;
						justify-content: space-between;
					}
					.top {
						.name {
							color: initial;
							font-size: 29upx;
							font-weight: 600;
							line-height: normal;
							white-space: normal;
							align-items: center;
						}

						.work_time {
							padding: 0px 5px;
							background-image: linear-gradient(111.2deg, rgba(53, 219, 160, .12), rgba(53, 219, 160, .12) 0, rgba(24, 181, 103, .12) 111.69%, rgba(24, 181, 103, .12) 0);
							border-radius: 5px;
							color: #18b567;
							font-size: 20rpx;
						}
					}

					.main {
						justify-content: left;
						padding: 10px 0;
						display: flex;
						justify-content: space-between;

						.score {
							margin-right: 10px;
							align-items: center;

							image {
								width: 12.5px;
								height: 12.5px;
								margin-right: 5px;
							}

							text {
								font-weight: bold;
								color: #fd5c5b;
							}
						}

						.served {
							color: #656565;
							font-weight: 400;
						}

						.distance {
							align-items: center;
							display: flex;
							margin-bottom: 6rpx;

							image {
								width: 14px;
								height: 16px;
								margin-right: 2px;
							}

							>text {
								margin-top: 5px;
								align-self: flex-end;
								color: #999;
								font-size: 14px;
								color: #333;
								margin-right: 10px;
								line-height: 14px;
								white-space: nowrap;
								margin-left: 2px;
							}
						}
					}

					.footer {
						align-items: center;
						display: flex;
						justify-content: space-between;

						.comment {
							text-align: center;
							align-items: center;
							display: flex;
							align-items: center;

							.pinglun {
								display: flex;
								align-items: center;
							}

							.aixin {
								display: flex;
								align-items: center;

								image {
									width: 20px;
									height: 17px;
								}
							}

							.health {
								font-size: 13px;
								color: rgb(138, 138, 138);
								width: 63px;
								margin-right: 0;
							}

							text {
								width: 26px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								text-align: left;
								font-size: 13px;
								margin-left: 2px;
								align-items: center;
							}

							image {
								width: 18px;
								height: 18px;
								margin-right: 4px;
								margin-top: -1px;
							}
						}

						.appointment {
							display: flex;
							flex-direction: column;
							align-items: center;

							.convention {
								align-self: flex-end;
								padding: 5px 10px;
								color: #fff;
								font-size: 12px;
								line-height: 17px;
								white-space: nowrap;
								background: linear-gradient(116.3deg, #35dba0, #35dba0 0, #18b567 111.69%, #18b567 0);
								border-radius: 5px;
							}
							.is_busy{
								background: #eee;
								color: #666;
							}
						}
					}
				}
			}
		}

		.technician_details {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			position: fixed;
			bottom: 50px;
			z-index: 9999 ;
			.top_seat {
				height: 150px;
				background: #000;
				opacity: 0.5;
				z-index: 2;
			}

			.comment {
				flex: 1;
				display: flex;
				flex-direction: column;
				background: #f5f5f5;
				box-shadow: 0 5px 8px rgba(0, 0, 0, 0);
				overflow-x: hidden;
				z-index: 2;

				.js_introduce {
					height: 90px;
					margin: 13px 12px 0 12px;
					border: 1px solid #24D576;
					border-radius: 7px;
					background-color: #fff;
					box-shadow: 0 5px 8px rgba(0, 0, 0, 0);
					display: flex;

					.js_photo {
						width: 60px;
						height: 60px;
						margin: 14px 13px;
						border-radius: 50%;
						overflow: hidden;

						>image {
							width: 100%;
							height: 100%;
						}
					}

					.js_message {
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: column;
						-webkit-flex-direction: column;
						justify-content: center;
						-webkit-justify-content: center;
						padding-right: 10px;

						.top_msg {
							// margin-top: 35px;
							display: flex;

							// justify-content: space-around;
							.technician_name {
								font-size: 14px;
								color: #000;
								margin-right: 9px;
								margin-bottom: 5px;
							}

							.work_year{
								font-size: 14px;
								font-weight: 500;
								color: #2BE17F;
								margin-right: 15px;
							}
							.score{
								display: flex;
								align-items: center;
								>image{
									width: 12.5px;
									height: 12.5px;
									margin-right: 5px;
								}
							}
						}

						.Introduction {
							font-size: 12px;
							color: #818181;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						// .main{
						// 	font-size: 20upx;
						// }

						// .bottom_msg{
						// 	display: flex;
						// 	align-items: center;
						// 	justify-content: space-around;
						// 	// margin-top:30px;
						// 	view{
						// 		display: flex;
						// 		align-items: center;
						// 		margin-right: 5px;
						// 	}
						// 	image{
						// 		width: 15px;
						// 		height: 15px;
						// 		margin-right: 2px;
						// 	}
						// }
					}
				}

				.aptitude {
					height: 66upx;
					line-height: 66upx;
					background-color: #fff;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					margin: 10px;
					border-radius: 5upx;

					image {
						width: 15px;
						height: 15px;
						margin-right: 5px;
					}

					>view {
						display: flex;
						font-size: 12px;
						align-items: center;
					}
				}

				.comment_list {
					flex: 1;
					margin: 0 12px;
					background-color: #fff;
					margin-bottom: 10px;
					padding: 10px;
					border-radius: 7px;
					overflow-y: auto;

					.comment_list_item {
						display: flex;
						flex-direction: column;
						border-bottom: 1px solid #eee;
						margin-top: 10px;
						font-size: 12px;
						color: #474747;

						.user_detail {
							display: flex;
							justify-content: space-between;

							.user_name {
								display: flex;
								align-items: center;

								text {
									font-size: 15px;
									margin-right: 5px;
									max-width: 120px;
									text-overflow: ellipsis;
									white-space: nowrap;
									overflow: hidden;
								}

								image {
									width: 12px;
									height: 12px;
								}
							}

							.comment_time {
								font-size: 14px;
								color: #9799ac;
							}
						}
						.comment_tags{
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							.tags_item{
								width: 25%;
								margin:10upx 1%;
								background-color: #eee;
								color: #999;
								border-radius: 10upx;
								text-align: center;
							}
						}
						.comment_text {
							padding: 5px 0;
						}

						.comment_label {
							margin-bottom: 20rpx;
						}
					}

					.no_comment {
						font-size: 24px;
						color: #656565;
					    position: absolute;
					    top: 50%;
					    left: 50%;
					    transform: translate(-50%,-50%);	
					}
				}

				.project_list {
					flex: 1;
					margin: 0 12px;
					border-radius: 7px;
					padding-bottom: 60px;
					overflow-y: auto;
					overflow-x: hidden;

					.project_list_item {
						// height: 81px;
						display: flex;
						justify-content: space-around;
						align-items: center;
						background-color: #fff;
						margin-bottom: 10px;
						border-radius: 8px;
						padding: 10px 0;

						.image {
							width: 89px;
							height: 69px;
							padding: 0 10px;

							>image {
								border-radius: 6px;
								width: 100%;
								height: 100%;
							}
						}

						.project_content {
							flex: 1;
							display: flex;

							.project_detail {
								flex: 1;
								display: flex;
								flex-direction: column;

								.title {
									font-size: 12px;
									color: #2e2e2e;
									margin-right: 2px;
									width: 80px;
									overflow: hidden;
									white-space: normal;
									flex-wrap: nowrap;
									height: 25px;
								}

								.time {
									// width: 70px;
									display: flex;
									align-items: center;
									font-size: 14px;

									.time_image {
										width: 14px;
										height: 14px;

										>image {
											width: 100%;
											height: 100%;
											margin-bottom: 5px;
										}
									}

									>text {
										margin-left: 5px;
									}
								}

								.content {
									display: flex;
									align-items: center;
									margin-top: 10px;

									.price {
										font-size: 14px;
										color: #fa3733;
										font-weight: bold;
										margin-right: 15px;

										>text {
											font-size: 20px;
										}
									}

									.number {
										color: #666;
										font-size: 12px;
									}

								}
							}

							.project_num {
								width: 80px;
								padding-right: 5px;
								display: flex;
								align-items: center;
								justify-content: space-around;
							}
						}
					}
				}
			}
		}

		.submit {
			width: 100%;
			height: 50px;
			padding: 5px 0;
			position: fixed;
			bottom: 0;
			background-color: #FFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: var(--window-bottom);
			z-index: 9999;

			.all_price {
				margin-left: 25px;
				font-size: 14px;
				color: #fa3733;

				text {
					font-size: 18px;
					font-weight: 600;
				}
			}

			.submit_button {
				margin-right: 25px;
				width: 160px;
				height: 40px;
				line-height: 40px;
				font-size: 16px;
				color: #fff;
				background-color: #24D576;
				border-radius: 5px;
				text-align: center;
			}
		}

		.not_detail {
			overflow-y: auto;
		}

		.not_service {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			>.tips{
				font-size: 32upx;
				font-weight: bold;
				color: #666;
			}
			.image {
				width: 635upx;
				height: 442upx;
				margin: 150upx auto;
				>image {
					width: 100%;
					height: 100%;
				}
			}
			.no_title{
				font-size: 32upx;
				color: #797979;
				letter-spacing:3px;
			}
			.left {
				font-size: 18px;
				margin-top: 30px;
				text-align: center;
				color: #23DC92;

				>picker {
					width: 100px;
					margin: 0 auto;

				}

				.edit {
					font-size: 18px;
					margin-left: 10px;
					color: #000;
				}
			}
		}

		.no_item {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	uni-scroll-view{
		width: auto !important; 
	}
	.overflow {
		overflow: hidden;
	}
	.showModal{
		padding: 50rpx 50rpx 30rpx 50rpx;
		.showTitle{
			margin-bottom: 50rpx;
			font-size: 36rpx;
			font-weight: bold;
		}
		.showContent{
			margin-bottom: 40rpx;
			color: #686765;
			line-height: 50rpx;
			font-size: 30rpx;
		}
		.showBtn{
			display: flex;
			justify-content: space-between;
			view{
				width: 45%;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				border-radius: 30rpx;
				color: #fff;
				background-color: #eb6830;
				&:first-child{
					color: #686765;
					background-color: #ebebeb;
				}
			}
		}
	}
</style>
